@CHARSET "UTF-8";
/* 类似直播点赞的撒花动效；规定动画，改变y轴偏移距离*/
  @keyframes animation-y {
    0% {
      transform: translate(-50%, 100px) scale(2);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -100px) scale(2);
    }
    85% {
      transform: translate(-50%, -240px) scale(2);
      opacity: 0.95;
    }
    95%{
        transform: translate(-50%, -280px) scale(2);
        opacity: 0.3;
    }
    100% {
      transform: translate(-50%, -300px) scale(2);
      opacity: 0;
    }
  }
  /* 规定动画，改变x轴偏移距离 */
  @keyframes animation-x {
    0% {
      margin-left: 0px;
    }
    25% {
      margin-left: 120rpx;
    }
    75% {
      margin-left: -120px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @keyframes animation-thirdx {
     0% {
       margin-left: 0px;
     }
     25% {
       margin-left: 180rpx;
     }
     75% {
       margin-left: -180px;
     }
     100% {
       margin-left: 0px;
     }
  }
  @keyframes animation-firthx {
     0% {
       margin-left: 0px;
     }
     25% {
       margin-left: -180rpx;
     }
     75% {
       margin-left: 180px;
     }
     100% {
       margin-left: 0px;
     }
  }
  @keyframes like--is-fith{
     0% {
       margin-left: 0px;
     }
     25% {
       margin-left: -160rpx;
     }
     75% {
       margin-left: 160px;
     }
     100% {
       margin-left: 0px;
     }
  }
  @keyframes like--is-six{
     0% {
       margin-left: 0px;
     }
     25% {
       margin-left: 80rpx;
     }
     75% {
       margin-left: -80px;
     }
     100% {
       margin-left: 0px;
     }
  }
  @keyframes like--is-seven{
     0% {
       margin-left: 0px;
     }
     25% {
       margin-left: 160rpx;
     }
     75% {
       margin-left: -160px;
     }
     100% {
       margin-left: 0px;
     }
  }
  @keyframes like--is-age{
    0% {
      margin-left: 0px;
    }
    25% {
      margin-left: 60rpx;
    }
    75% {
      margin-left: -60px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @keyframes animation-right {
      0% {
        transform: translate(-50%, 100px) scale(1);
        opacity: 1;
      }
      50% {
        transform: translate(-50%, -100px) scale(1.2);
      }
      85% {
        transform: translate(-50%, -240px) scale(1.2);
        opacity: 0.9;
      }
      100% {
        transform: translate(-50%, -300px) scale(1.2);
        opacity: 0;
      }
  }
  .showlike_like {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .like--is-second {
    animation: animation-x 4s -0s linear infinite,
      animation-y 4s 0s linear 1;
  }
  .showlike_like--is-third{
      animation: animation-thirdx 4s -0s linear infinite,
        animation-y 6s 0s linear 1;
  }
  .like--is-firth{
     animation: animation-firthx 4s -0s linear infinite,
       animation-y 6s 0s linear 1;
  }
  .like--is-right{
      animation: animation-rightx 4s -2s linear infinite,
        animation-y 5s 0s linear 1;
  }
  .like--is-fith{
      animation: like--is-fith 4s -2s linear infinite,
        animation-y 5s 0s linear 1;
  }
  .like--is-six{
      animation: like--is-six 4s -2s linear infinite,
       animation-y 6s 0s linear 1;
  }
  .like--is-seven{
      animation: like--is-seven 4s -2s linear infinite,
       animation-y 6s 0s linear 1;
  }
  .like--is-age{
      animation: like--is-age 4s -2s linear infinite,
       animation-y 6s 0s linear 1;
  }